<template>
  <div class="_wz_roles">
    <Card :bordered="true" style="height: 100%;">
      <p slot="title">列表</p>
      <template #extra>
        <Button type="primary" @click="addTableData">添加</Button>
      </template>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>
    <Drawer :title="selectData.roleId?'修改':'添加'" v-model="formOperation" width="720" :draggable="true" :mask-closable="false" :styles="formOperationStyles">
      <rolesAdd v-if="formOperation" :selectData="selectData"  @closeFun="closeFun"></rolesAdd>
    </Drawer>

    <Drawer title="菜单功能授权" v-model="formOperation1" width="500" :draggable="true" :mask-closable="false">
      <rolesNav v-if="formOperation1" :selectData="selectData"></rolesNav>
    </Drawer>

  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent
} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import wzTbale from "../../components/table/index.vue";
import rolesAdd from './rolesAdd.vue'
import rolesNav from './rolesNav.vue'
//reactive
export default defineComponent({
  name: 'roles',//组件名称
  components: {
    wzTbale,
    rolesAdd,
    rolesNav,
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法

    // 用于获取$refs
    const wzTbale = ref();

    const state = reactive({
      tableData: {
        url: apiUrl.systemRoleSystemRoleList,//请求地址
        method: 'post',//请求方式
        where: {},//搜索条件
        height: '100%',//表格高度 auto
        page: false,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 70, align: 'center', title: '序号'},
          { title: '角色名称', key: 'roleName', minWidth: 160,tooltip:true,resizable: true, },
          { title: '角色标识', key: 'roleKey', minWidth: 140,tooltip:true,resizable: true, },
          { title: '经营企业', key: 'deptName', minWidth: 260,tooltip:true,resizable: true, },
          { title: '备注', key: 'comments', minWidth: 200,tooltip:true,resizable: true, },
          { title: '创建时间', key: 'createTime', minWidth: 180,tooltip:true,resizable: true, },
          {title: '操作', fixed: 'right', width: 170,
            render: (h, params) => {
              let operationButtons = [];
              //修改
              operationButtons.push(
                  h('span', {style: {"color": "#2d8cf0", "cursor": "pointer"},
                    onClick:async () => {
                      state.selectData = JSON.parse(JSON.stringify(params.row));
                      state.formOperation = true;
                    }
                  }, '修改')
              );
              operationButtons.push(h(resolveComponent('Divider'), {type: 'vertical',}, ''))
              operationButtons.push(
                  h('span', {style: {"color": "#2d8cf0", "cursor": "pointer"},
                    onClick:async () => {
                      $ViewUIPlus.Modal.confirm({
                        title: '删除提醒',
                        content: '确定要删除选中的数据？',
                        onOk: () => {
                          $ViewUIPlus.Spin.show()
                          $axios.post(apiUrl.systemRoleSystemRoleDelete,{roleId:params.row.roleId}).then((res) => {
                            $ViewUIPlus.Spin.hide()
                            if (!!res) {
                              $ViewUIPlus.Message.success('删除成功');
                              searchSubmit();
                            }
                          }).catch((err) => {
                            console.log("失败", err)
                          })
                        },
                        onCancel: () => {
                          //点击取消
                        }
                      });
                    }
                  }, '删除')
              );

              //功能授权
              operationButtons.push(h(resolveComponent('Divider'), {type: 'vertical',}, ''))
              operationButtons.push(
                  h('span', {style: {"color": "#2d8cf0", "cursor": "pointer"},
                    onClick:async () => {
                      state.selectData = JSON.parse(JSON.stringify(params.row))
                      state.formOperation1 = true;
                    }
                  }, '功能授权')
              );

              return h('div', operationButtons);
            }
          },
        ],
        pagingParameters:{// 分页参数
          page:'pageNo',
          limit:'pageSize'
        },
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },
      formDataSearch: {},//搜索表单数据
      formOperation: false,//表单左侧移出
      formOperationStyles: {//表单左侧移出css
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formTitle: "",//表单名称
      selectData:{},

      formOperation1:false,//
    });




    //搜索方法
    const searchSubmit = ()=>{
      let formDataSearch = JSON.parse(JSON.stringify(state.formDataSearch));
      state.tableData.where = formDataSearch;
      wzTbale.value.tableLoadData(true)
    }

    //添加
    const addTableData = ()=> {
      state.formTitle = "添加"
      state.selectData = { status: 0,inOrgState:0}
      state.formOperation = true
    }


    //添加修改触发后关闭刷新
    const closeFun = (data)=> {
      if (data) {//添加修改 刷新表单
        searchSubmit();
      }
      state.formOperation = false;
      state.ukeyTion = false;
    }





    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      searchSubmit,//搜索
      addTableData,//添加
      wzTbale,// ref 使用 封装的表格
      closeFun,//弹层关闭刷新方法
    }
  }
})


</script>

<style lang="less">
._wz_roles{
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 51px);
  }
}
</style>

